<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link href="css/bootstrap.min.css" rel="stylesheet" />

		<!--页面样式文件-->
		<link rel="stylesheet" href="css/new.css">
		<style type="text/css">
			.echart-item {
				background: none;
				box-shadow: none;
			}

			.echart-item div {
				margin: 10px;
				padding: 30px 0 20px;
				border-radius: 8px;
			}
		</style>
	</head>

	<body class="gray-bg">
		<!--右侧主体-->

		<div class="main">

			<div class="greenhouse-btm clearfix">
				<div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
					<div class="greenhouse-info" style="background-image: url(img/greenhouse-1.png);">
						<p class="title">空气温度</p>
						<p class="num">32 <span class="unit">℃</span></p>
					</div>
				</div>
				<div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
					<div class="greenhouse-info" style="background-image: url(img/greenhouse-2.png);">
						<p class="title">空气湿度</p>
						<p class="num">32 <span class="unit">%</span></p>
					</div>
				</div>
				<div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
					<div class="greenhouse-info" style="background-image: url(img/greenhouse-3.png);">
						<p class="title">土壤温度</p>
						<p class="num">32 <span class="unit">℃</span></p>
					</div>
				</div>
				<div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
					<div class="greenhouse-info" style="background-image: url(img/greenhouse-4.png);">
						<p class="title">土壤湿度</p>
						<p class="num">32 <span class="unit">%</span></p>
					</div>
				</div>

			</div>

			<!--图表区域-->
			<div class="wenshi-chart-btm">
				<div class="wenshi-echart-item col-sm-12 col-md-12 col-lg-6">
					<div id="main" style="width:100%;height:410px;background: #FFF;"></div>
				</div>
				<div class="wenshi-echart-item col-sm-12 col-md-12 col-lg-6">
					<div id="main2" style="width:100%;height:410px;background: #FFF;"></div>
				</div>

			</div>

		</div>

		<script src="js/jquery.min.js"></script>
		<!--echart-->
		<script src="js/echarts.min.js"></script>


		<script>
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var myChart2 = echarts.init(document.getElementById('main2'));
			var xData = ['12.18', '12.19', '12.20', '12.21', '12.22', '12.23', '12.24', '12.25'];
			var yData = [20, 30, 40, 30, 40, 50, 40, 30];
			var yData2 = [10, 20, 30, 40, 50, 60, 30, 40];

			// 指定图表的配置项和数据
			var option = {
				legend: {
					data: ['气表','气表2'],
					right: '3%',
					selectedMode: false
				},
				title: {
					text: '一周气表走势图',
					x: 'center',
					textStyle: {
						fontSize: 26,
						color: '#2d353e'
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					top: '21%',
					bottom: '7%',
					left: '7%',
					right: '5%'
				},
				xAxis: {
					name: '日期',
					nameTextStyle: {
						color: '#333',
						fontSize: 15,
						padding:[0,0,0,-20]
					},
					data: xData,
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#b8dbff'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#333',
							fontSize: 15,
						}
					}
				},
				yAxis: [{
					name: 'm³',
					nameTextStyle: {
						color: '#333',
						fontSize: 18,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#ebeef1'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#b8dbff'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#333',
							fontSize: 18,
						}
					}
				}],
				series: [{
						name: '气表',
						type: 'line',
						barWidth: 12,
						symbolSize: 10,
						symbol: 'circle',
						emphasis: {
							itemStyle: {
								color: '#ff6d10'
							}
						},
						itemStyle: {
							normal: {
								color: '#ff6d10',
								barBorderRadius: [0, 0, 0, 0],
							}
						},
						data: yData
					},
					{
						name: '气表2',
						type: 'line',
						barWidth: 12,
						symbolSize: 10,
						symbol: 'circle',
						emphasis: {
							itemStyle: {
								color: '#6ab196'
							}
						},
						itemStyle: {
							normal: {
								color: '#6ab196',
								barBorderRadius: [0, 0, 0, 0],
							}
						},
						data: yData2
					}
				]
			};


			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			myChart2.setOption(option);
		</script>
	</body>

</html>
